<template>
  <div class="main">
    <div class="left">
      <studentMainleft></studentMainleft>
    </div>
    <div class="right">
      <div class="from">
        <el-table :data="applicationTable" style="width: 100%" @row-click="rowclick">
          <el-table-column prop="ApplicantsId" label="申请人学号" width="250"></el-table-column>
          <el-table-column prop="ApplicationType" label="申请类型" width="250">
            <template slot-scope="scope">
              <span v-if="scope.row.ApplicationType==2">学生个人信息修改</span>
              <span v-if="scope.row.ApplicationType==3">老师个人信息修改</span>
              <span v-if="scope.row.ApplicationType==4">调课</span>
              <span v-if="scope.row.ApplicationType==5">学生成绩提交审核</span>
              <span v-if="scope.row.ApplicationType==6">学生成绩修改</span>
            </template>
          </el-table-column>
          <el-table-column prop="Status" label="申请状态" width="250">
            <template slot-scope="scope">
              <template v-if="user.PositionId!=6">
                <span v-if="scope.row.Status==1">未审核</span>
                <span v-if="scope.row.Status==2 ">
                  <i class="fontFamily hhtxtongguo" style="color: #68bb8d;"></i>已同意
                </span>
                <span v-if="scope.row.Status==3 ">
                  <i class="fontFamily hhtxjujue" style="color:#fa5a5a"></i>已拒绝
                </span>
              </template>
              <template v-else>
                 <span v-if="scope.row.Status<4">未审核</span>
                <span v-if="scope.row.Status==4 ">
                  <i class="fontFamily hhtxtongguo" style="color: #68bb8d;"></i>已同意
                </span>
                <span v-if="scope.row.Status==5 ">
                  <i class="fontFamily hhtxjujue" style="color:#fa5a5a"></i>已拒绝
                </span>
              </template>
            </template>
          </el-table-column>
          <el-table-column prop="ByTheTime" label="申请时间"></el-table-column>
        </el-table>
        <el-drawer title="审批详情" :visible.sync="drawer" :direction="direction" size="40%">
          <div class="personInfo">
            <template v-if="flag">
              <el-descriptions title="个人信息" :column="1">
                <el-descriptions-item label="姓名">
                  {{oldStuInfo.StuName}}
                  <template v-if="stuInfo.StuName!=oldStuInfo.StuName">
                    <span style="color:red">修改为</span>
                    {{stuInfo.StuName}}
                  </template>
                </el-descriptions-item>
                <el-descriptions-item label="手机号">
                  {{oldStuInfo.StuPhone}}
                  <template v-if="stuInfo.StuPhone!=oldStuInfo.StuPhone">
                    <span style="color:red">修改为</span>
                    {{stuInfo.StuPhone}}
                  </template>
                </el-descriptions-item>
                <el-descriptions-item label="性别">
                  {{oldStuInfo.StuSex}}
                  <template v-if="stuInfo.StuSex!=oldStuInfo.StuSex">
                    <span style="color:red">修改为</span>
                    {{stuInfo.StuSex}}
                  </template>
                </el-descriptions-item>
                <el-descriptions-item label="年龄">
                  {{oldStuInfo.StuAge}}
                  <template v-if="stuInfo.StuAge!=oldStuInfo.StuAge">
                    <span style="color:red">修改为</span>
                    {{stuInfo.StuAge}}
                  </template>
                </el-descriptions-item>
                <el-descriptions-item label="入学时间">
                  {{oldStuInfo.StubackTime}}
                  <template
                    v-if="stuInfo.StubackTime!=oldStuInfo.StubackTime"
                  >
                    <span style="color:red">修改为</span>
                    {{stuInfo.StubackTime}}
                  </template>
                </el-descriptions-item>
                <el-descriptions-item label="邮箱">
                  {{oldStuInfo.StuEmail}}
                  <template v-if="stuInfo.StuEmail!=oldStuInfo.StuEmail">
                    <span style="color:red">修改为</span>
                    {{stuInfo.StuEmail}}
                  </template>
                </el-descriptions-item>
                <el-descriptions-item label="籍贯">
                  {{oldStuInfo.NativePlace}}
                  <template
                    v-if="stuInfo.NativePlace!=oldStuInfo.NativePlace"
                  >
                    <span style="color:red">修改为</span>
                    {{stuInfo.NativePlace}}
                  </template>
                </el-descriptions-item>
                <el-descriptions-item label="政治面貌">
                  {{oldStuInfo.PoliticalLandscape}}
                  <template
                    v-if="stuInfo.PoliticalLandscape!=oldStuInfo.PoliticalLandscape"
                  >
                    <span style="color:red">修改为</span>
                    {{stuInfo.PoliticalLandscape}}
                  </template>
                </el-descriptions-item>
                <el-descriptions-item label="民族">
                  {{oldStuInfo.National}}
                  <template v-if="stuInfo.National!=oldStuInfo.National">
                    <span style="color:red">修改为</span>
                    {{stuInfo.National}}
                  </template>
                </el-descriptions-item>
              </el-descriptions>
            </template>
            <template v-else>
              <el-descriptions title="个人信息" :column="1">
                <el-descriptions-item label="姓名">
                  {{oldStuInfo.WorkerName}}
                  <template
                    v-if="stuInfo.WorkerName!=oldStuInfo.WorkerName"
                  >
                    <span style="color:red">修改为</span>
                    {{stuInfo.WorkerName}}
                  </template>
                </el-descriptions-item>
                <el-descriptions-item label="手机号">
                  {{oldStuInfo.WorkerPhone}}
                  <template
                    v-if="stuInfo.WorkerPhone!=oldStuInfo.WorkerPhone"
                  >
                    <span style="color:red">修改为</span>
                    {{stuInfo.WorkerPhone}}
                  </template>
                </el-descriptions-item>
                <el-descriptions-item label="性别">
                  {{oldStuInfo.WorkerSex}}
                  <template v-if="stuInfo.WorkerSex!=oldStuInfo.WorkerSex">
                    <span style="color:red">修改为</span>
                    {{stuInfo.WorkerSex}}
                  </template>
                </el-descriptions-item>
                <el-descriptions-item label="年龄">
                  {{oldStuInfo.WorkerAge}}
                  <template v-if="stuInfo.WorkerAge!=oldStuInfo.WorkerAge">
                    <span style="color:red">修改为</span>
                    {{stuInfo.WorkerAge}}
                  </template>
                </el-descriptions-item>
                <el-descriptions-item label="入职时间">
                  {{oldStuInfo.WorkerbackTime}}
                  <template
                    v-if="stuInfo.WorkerbackTime!=oldStuInfo.WorkerbackTime"
                  >
                    <span style="color:red">修改为</span>
                    {{stuInfo.WorkerbackTime}}
                  </template>
                </el-descriptions-item>
                <el-descriptions-item label="邮箱">
                  {{oldStuInfo.WorkerEmail}}
                  <template
                    v-if="stuInfo.WorkerEmail!=oldStuInfo.WorkerEmail"
                  >
                    <span style="color:red">修改为</span>
                    {{stuInfo.WorkerEmail}}
                  </template>
                </el-descriptions-item>
              </el-descriptions>
            </template>

            <el-button
              type="success"
              round
              @click="AlterStuCounselorApproval(1)"
              v-if="Status==1"
            >同意</el-button>
            <template v-if="Status==2">
              <h3>您已同意改申请</h3>
            </template>

            <el-button type="danger" round @click="AlterStuCounselorApproval(2)" v-if="Status==1">拒绝</el-button>
            <template v-if="Status==3">
              <h3>您已拒绝改申请</h3>
            </template>
          </div>
        </el-drawer>
      </div>
    </div>
  </div>
</template>

<script>
import studentMainleft from "@/components/studentMainleft";
export default {
  components: {
    studentMainleft
  },
  data() {
    return {
      drawer: false,
      direction: "rtl",
      user: null,
      applicationTable: [],
      stuInfo: {},
      oldStuInfo: {},
      applicationFormId: -1,
      Status: 1,
      flag: false
    };
  },
  created() {
    this.GetStudentApplicationFormByWorkerToken();
  },
  mounted() {},
  methods: {
    AlterStuCounselorApproval(status) {
      this.$axios({
        method: "put",
        url: this.$api.AlterStuCounselorApproval,
        params: {
          token: this.user.Token,
          status: status,
          applicationFormId: this.applicationFormId
        }
      }).then(res => {
        if (rew.data.code == 200) {
          this.$message({
            message: "操作成功",
            type: "success"
          });
        }
      });
    },
    rowclick(row, column, event) {
      console.log(row);
      this.Status = row.Status;
      this.applicationFormId = row.Id;
      var ApplicationType = row.ApplicationType;
      var params;
      var url;
      switch (ApplicationType) {
        case 2:
          url = this.$api.GetStudent;
          params = { stuId: row.ApplicantsId };
          this.flag = true;
          break;
        case 3:
          url = this.$api.GetWorder;
          params = { WorkerId: row.ApplicantsId };
          this.flag = false;
          break;
        default:
      }

      this.$axios({
        method: "get",
        url: url,
        params: params
      }).then(res => {
        this.oldStuInfo = res.data.message;
        var time =
          res.data.StuId == null
            ? this.oldStuInfo.WorkerbackTime
            : this.oldStuInfo.StubackTime;
        var date = new Date(time);
        if (res.data.stuId != null) {
          this.oldStuInfo.StubackTime =
            date.getFullYear() + "-" + date.getMonth() + "-" + date.getDay();
        } else {
          this.oldStuInfo.WorkerbackTime =
            date.getFullYear() + "-" + date.getMonth() + "-" + date.getDay();
        }
      });
      var arr = JSON.parse(row.InfoJson);
      this.stuInfo = arr[0];
      this.drawer = true;
    },

    GetStudentApplicationFormByWorkerToken() {
      this.user = JSON.parse(sessionStorage.getItem("user"));
      if (this.user.PositionId != 6) {
        this.$axios({
          method: "get",
          url: this.$api.GetStudentApplicationFormByWorkerToken,
          params: {
            token: this.user.Token,
            classId: this.user.ClassId
          }
        }).then(res => {
          this.applicationTable = res.data.message;
        });
      } else {
        this.$axios({
          method: "get",
          url: this.$api.GetAllApplicationForm,
          params: {
            token: this.user.Token
          }
        }).then(res => {
          this.applicationTable = res.data.message;
        });
      }
    }
  }
};
</script>

<style scoped>
.main {
  display: flex;
  height: 100%;
}
.right {
  width: 100%;
  background-color: white;
  height: 80%;
  margin-left: 10px;
}
.right .from {
  padding: 30px;
}
.personInfo {
  margin: 30px;
}
</style>
